<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>请点击数字查看</title>
  <link rel="stylesheet" href="css/common.css" />
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <div class="m-center flex-v">
    <div class="top">
      <div class="m-back">〈</div>
    </div>
    <div class="cont flex-v">
      <div class="m-item-tabs">
        <div class="item">
          <i class="icon-001"></i>
        </div>
      </div>
      <div class="m-item-pages flex-v">
        <div class="item flex-v z-show">
          <p>
            一个完整逻辑站点；展示了列表、详情、部分列表操作；本地JSON数据读取；内有高德地图和ECharts应用场景。前后端分离开发，前端使用Vue+Vux+vue-router+axios+vuex搭建。
          </p>
          <div class="img-preview" style="background-image:url(images/001000.gif)"></div>
          <a href="DEMO001/index.html" target="_blank">以上为截图，查看站点点击前往 >></a>
        </div>
        <div class="item flex-v">
          <p>
            适用于微信公众号的内部服务站点，展示了列表、详情、部分列表操作。前后端分离开发，前端使用Vue+Vux+vue-router+axios+vuex搭建。
          </p>
          <div class="img-preview" style="background-image:url(images/002000.gif)"></div>
          <a href="DEMO002/index.html" target="_blank">以上为截图，查看站点点击前往 >></a>
        </div>
        <div class="item flex-v">
          <p>
            物联网项目，用于操作实际硬件，并将操作和结果以动画反馈和动画展示。前后端分离开发，前端使用Mui+template等进行开发。
          </p>
          <div class="img-preview" style="background-image:url(images/003000.gif)"></div>
          <a href="DEMO003/html/Login.html" target="_blank">以上为截图，查看站点点击前往 >></a>
        </div>
        <div class="item flex-v">
          <p>
            员工管理项目；展示了列表、详情、部分列表操作；本地JSON数据读取；内有高德地图和ECharts应用场景。前后端分离开发，前端使用Vue+Vux+vue-router+axios+vuex搭建。
          </p>
          <div class="img-preview" style="background-image:url(images/004000.gif)"></div>
          <a href="DEMO004/html/Login.html" target="_blank">以上为截图，查看站点点击前往 >></a>
        </div>
        <div class="item flex-v">
          <p>手机端展示类站点，基于Vue，业务型站点，组件为自定义组件以适应多样需求。<br />
            实际场景里公共页面复用，各个站点有对应的个性化页面，于是利用Vue的多入口配置创建了一个多站点生成的项目，避免了重复页面的开发/复制，各个站点个性页分别开发，独立打包。<br />
            demo很简单，主要展示了整体结构和少许自定义组件。</p>
          <a href="DEMO005/index.html" target="_blank">查看点击前往 >></a>
        </div>
        <div class="item flex-v">
          <p>PC端的一个典型的后台管理界面示例，基于Vue，element-ui组件库，根据实际业务进行对应的组件二次改装。<br />
            demo很简单，主要展示一下整体结构和少许二次封装的组件。</p>
          <a href="DEMO006/index.html#/login" target="_blank">查看点击前往（请使用电脑查看） >></a>
        </div>
        <div class="item flex-v">
          <p>PC端基于Vue，element-ui组件库，根据实际业务进行对应的组件二次封装的说明文档。</p>
          <a href="DEMO007/index.html#/" target="_blank">查看点击前往（请使用电脑查看） >></a>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  initRender()
  initEvents()

  function initRender() {
    let tabs = document.querySelector('.m-item-tabs')
    let tmphtml = ''
    for(let i = 1; i < 8; i++) {
      tmphtml += `<div class="item">
        <i class="icon-00${i}">${i}</i>
      </div>`
    }
    tabs.innerHTML = tmphtml
  }
  function initEvents() {
    document.querySelectorAll('.m-item-tabs >.item').forEach((ele, index) => {
      ele.addEventListener('click', event => {
        document.querySelector('.m-center').classList.add('z-show')
        document.querySelector('.m-item-pages >.z-show').classList.remove('z-show')
        document.querySelectorAll('.m-item-pages >.item')[index].classList.add('z-show')
        document.querySelector('body').className = 'color-' + (index + 1)
      })
    })

    document.querySelector('.m-back').addEventListener('click', event => {
      document.querySelector('.m-center').classList.remove('z-show')
      document.querySelector('body').className = ''
    })
  }
</script>
</html>